<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文章列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/frame/font.css">
		<link rel="stylesheet" href="./css/frame/xadmin.css">
		<link rel="stylesheet" href="./css/page/table.css" />
		<script type="text/javascript" src="./lib/jquery/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./js/utils/TimeUtils.js"></script>
		<script type="text/javascript" src="./js/constant/urls.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js"></script>
		<script type="text/javascript" src="./js/frame/xadmin.js"></script>
	</head>

	<body class="layui-anim layui-anim-up">
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href="">公告管理</a>
				<a>
					<cite>公告列表</cite></a>
			</span>
			<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
			 title="刷新">
				<i class="layui-icon" style="line-height:30px">ဂ</i></a>
		</div>
		<div class="x-body">
			<div class="demoTable condition">
				标题搜索：
				<div class="layui-inline">
					<input class="layui-input head-search" name="queryParam" id="demoReload" autocomplete="off">
				</div>
				<button class="layui-btn" data-type="reload">搜索</button>
			</div>
			<table class="layui-hide" id="LAY_table_user" lay-filter="tableFilter"></table>
		</div>
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn" lay-event="deleteCheckData">删除选中行</button>
				<button class="layui-btn" onclick="x_admin_show('添加文章','./notice-add.html')"><i class="layui-icon"></i>添加</button>
			</div>
		</script>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
			$(function() {
				layui.use('table', function() {
					var table = layui.table;
					//方法级渲染
					table.render({
						elem: '#LAY_table_user',
						url: urls.sysUrl + 'notice/list',
						toolbar: '#toolbarDemo',
						cols: [
							[{
								checkbox: true,
								fixed: 'left'
							}, {
								field: 'id',
								title: 'ID',
								hide: true
							}, {
								field: 'title',
								title: '标题',
								width: 300
							}, {
								field: 'content',
								title: '内容',
								width: 450
							}, {
								field: 'type',
								title: '文章类型',
								width: 180,
								templet: function(d) {
									if (d.type === 1) {
										return "系统公告";
									} else if (d.type === 2) {
										return "控制台公告";
									}
								}
							}, {
								field: 'endDate',
								title: '截止时间',
								width: 205,
								templet: function(d) {
									return timestampToDate(d.endDate);
								}
							}, {
								field: 'createTime',
								title: '创建时间',
								sort: true,
								width: 205,
								templet: function(d) {
									return timestampToDate(d.createTime);
								}
							}, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 240,
								align: 'center'
							}]
						],
						id: 'testReload',
						page: true
					});

					//头工具栏事件
					table.on('toolbar(tableFilter)', function(obj) {
						var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
						switch (obj.event) {
							case 'deleteCheckData':
								var data = checkStatus.data; //获取选中行数据
								let arr = new Array();
								for (let i = 0; i < data.length; i++) {
									arr.push(data[i].id);
								}
								arr.join(",");
								layer.confirm('确定删除这些数据么', function() {
									$.ajax({
										type: "delete",
										url: urls.sysUrl + 'notice/multi',
										async: true,
										data: JSON.stringify(arr),
										contentType: "application/json; charset=utf-8",
										success: function(res) {
											if (res.code === 0) {
												layer.msg(res.msg, {
													icon: 6
												}, function() {
													// 获得frame索引
													var index = parent.layer.getFrameIndex(window.name);
													//关闭当前frame
													parent.layer.close(index);
												});
											} else {
												layer.msg(res.msg);
											}
										}
									});
									pageReload(); //重载页面
								});
								break;
						};
					});
					//表数据监听工具条
					table.on('tool(tableFilter)', function(obj) {
						var data = obj.data;
						if (obj.event === 'detail') {
							layer.open({
								type: 2,
								title: '文章信息详情',
								content: 'notice-details.html?id=' + data.id,
								area: ['1000px', '600px']
							});
						} else if (obj.event === 'edit') {
							layer.open({
								type: 2,
								title: '文章信息编辑',
								content: 'notice-edit.html?id=' + data.id,
								area: ['1000px', '600px']
							});
						} else if (obj.event === 'del') {
							layer.confirm('确定删除行么', function(index) {
								obj.del();
								let arr = new Array();
								arr.push(data.id);
								$.ajax({
									type: "delete",
									url: urls.sysUrl + 'notice/multi',
									async: true,
									data: JSON.stringify(arr),
									contentType: "application/json; charset=utf-8",
									success: function(res) {
										if (res.code === 0) {
											layer.msg(res.msg, {
												icon: 6
											}, function() {
												// 获得frame索引
												var index = parent.layer.getFrameIndex(window.name);
												//关闭当前frame
												parent.layer.close(index);
											});
										} else {
											layer.msg(res.msg);
										}
									}
								});
								layer.close(index);
							});
						}
					});
					var active = {
						reload: function() {
							var demoReload = $('#demoReload');
							//执行重载
							table.reload('testReload', {
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									queryParam: demoReload.val()
								}
							}, 'data');
						}
					};
					//删除添加操作的单击事件
					$('.demoTable .layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					$('.demoTable .layui-btn').on('click', function() {
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					//执行重载
					function pageReload() {
						table.reload('testReload', {
							page: {
								curr: 1 //重新从第 1 页开始
							}
						});
					}
				});
			});
		</script>
	</body>

</html>
